{% include 'include/head.html' %}

            <!-- Page Container START -->
            <div class="page-container">
                

                <!-- Content Wrapper START -->
                <div class="main-content">
                    <div class="page-header">
                        <h2 class="header-title">收银台</h2>

                    </div>
                    <div class="container">
                        <div class="card">
                            <div class="card-body">
                                <div id="invoice" class="p-h-30">
                                    <div class="m-t-15 lh-2">
                                        <div class="inline-block">
                                            <div class="row">
                                                <div class="m-b-15 col-md-6">
                                                    <label>款号</label>
                                                    <input type="text" class="form-control" placeholder="款号" id="sn">
                                                </div>
                                                <div class="m-b-15  col-md-6">
                                                    <label>数量</label>
                                                    <input type="text" class="form-control" placeholder="数量" id="num">
                                                </div>
                                                <div class="m-b-15 col-md-6">
                                                    <label>金额</label>
                                                    <input type="text" class="form-control" placeholder="金额" id="price">
                                                </div>
                                            </div>
                                        </div>
                                    </div>
                                <div id="prints">
                                    <div class="float-right">
                                        <h2>{{ sname }}</h2>
                                    </div>
                                    <div class="row m-t-20 lh-2">
                                        <div class="col-sm-9">
                                            <h3 class="p-l-10 m-t-10">单据明细:</h3>
                                            <address class="p-l-10 m-t-10">
                                                <span class="font-weight-semibold text-dark"></span><br>
                                                <div class="m-b-15 col-md-6">
                                                    <label>收银员</label>
                                                    <select class="select2" name="state" id="syr">
                                                        {% for item in syrinfos %}
                                                            <option value="{{ item.id }}">{{ item.name }}</option>
                                                        {% endfor %}
                                                    </select>
                                                </div>
                                                <div class="m-b-15 col-md-6">
                                                    <label>收银方式</label>
                                                    <select class="select2" name="state" id="zffs">
                                                        {% for item in zffsinfos %}
                                                            <option value="{{ item.id }}">{{ item.name }}</option>
                                                        {% endfor %}
                                                    </select>
                                                </div>
                                                <div class="m-b-15 col-md-6">
                                                    <label>会员</label>
                                                    <input type="text" class="form-control" placeholder="会员" id="member" disabled="true">
                                                </div>
                                            </address>
                                        </div>
                                        <div class="col-sm-3">
                                            <div class="m-t-80">
                                                <div class="text-dark text-uppercase d-inline-block">
                                                    <span class="font-weight-semibold text-dark">单据编号 :</span></div>
                                                #<div class="float-right" id="pid">{{ sn }}</div>
                                            </div>
                                            <div class="text-dark text-uppercase d-inline-block">
                                                <span class="font-weight-semibold text-dark">单据日期 :</span>
                                            </div>
                                            <div class="float-right">{% now "Y-m-d H:i:s" %}</div>
                                        </div>
                                    </div>
                                    <div class="m-t-20">
                                        <div class="table-responsive">
                                            <table class="table" id="list">
                                                <thead>
                                                    <tr>
                                                        <th>No.</th>
                                                        <th>款号</th>
                                                        <th>数量</th>
                                                        <th>价格</th>
                                                        <th>总计</th>
                                                    </tr>
                                                </thead>
                                                <tbody id="ta">

                                                </tbody>
                                            </table>
                                        </div>
                                        <div class="row m-t-30 lh-1-8">
                                            <div class="col-sm-12">
                                                <div class="float-right text-right">
                                                    <hr>
                                                    <h3><span class="font-weight-semibold text-dark">整单合计金额 :</span> $<span id="totle">0</span></h3>
                                                </div>
                                            </div>
                                        </div>
                                        <div class="row m-t-30 lh-2">
                                            <div class="col-sm-12">
                                                <div class="border-bottom p-v-20">
                                                    <p class="text-opacity"><small>1.已售商品在保持完好（未穿着使用、未洗涤、未损坏、无异味、完整吊牌）的前提下，在购买后7天内可退换。
2.退换货时请交还原购买商品，并出示原始小票及银行存根。</small></p>
                                                </div>
                                            </div>
                                        </div>
                                    </div>
                                        <div class="hidden-print col-md-12 text-right">
                                            <br>
                                            <button class="btn btn-icon btn-tone" id="useMember" data-toggle="modal" data-target="#useMembers"><i class="anticon anticon-user"></i></button>
                                            <a href="#largeModal1" data-toggle="modal" data-target="#largeModal1">
                                                <button class="btn btn-icon btn-tone" id="print"><i class="anticon anticon-printer"></i></button>
                                            </a>
                                            <a href="#largeModal" data-toggle="modal" data-target="#largeModal">
                                                <button class="btn btn-icon btn-tone" id="clear"><i class="anticon anticon-delete"></i></button>
                                            </a>

                                            <button class="btn btn-icon btn-tone" id="createMember" data-toggle="modal" data-target="#createMembers"><i class="anticon anticon-select"></i></button>
                                            <button class="btn btn-icon btn-tone" id="th" data-toggle="modal" data-target="#exampleModalScrollable"><i class="anticon anticon-shop"></i></button>
                                            <button class="btn btn-icon btn-tone" id="submit"><i class="anticon anticon-shopping"></i></button>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
                <!-- Content Wrapper END -->
                {% csrf_token %}
                <!-- Footer START -->
                <footer class="footer">
                    <div class="footer-content">
                        <p class="m-b-0">Copyright © 2019 Theme_Nate. All rights reserved.</p>
                        <span>
                            <a href="" class="text-gray m-r-15">Term &amp; Conditions</a>
                            <a href="" class="text-gray">Privacy &amp; Policy</a>
                        </span>
                    </div>
                </footer>
                <!-- Footer END -->

            </div>
            <!-- Page Container END -->
        </div>
    </div>
    <!-- Modal -->
    <!--退货-->
    <div class="modal fade" id="exampleModalScrollable">
        <div class="modal-dialog modal-dialog-scrollable">
            <div class="modal-content">
                <div class="modal-header">
                    <h5 class="modal-title" id="exampleModalScrollableTitle">退货</h5>
                    <button type="button" class="close" data-dismiss="modal">
                        <i class="anticon anticon-close"></i>
                    </button>
                </div>
                <div class="modal-body">
                    <div class="form-row align-items-center">
                        <div class="col-auto">
                            <input type="text" class="form-control" placeholder="输入退货单号" id="thid">
                        </div>
                        <div class="col-auto">
                            <button id="find" class="btn btn-primary">查询</button>
                        </div>
                    </div>
                    <br>
                    <div class="table-responsive">
                        <table class="table" id="thlist">
                            <tbody>

                            </tbody>
                        </table>
                    </div>
                </div>
                <div class="modal-footer">
                    <button type="button" class="btn btn-default" data-dismiss="modal">取消</button>
                    <button type="button" class="btn btn-primary" id="thsubmit">提交退货</button>
                </div>
            </div>
        </div>
    </div>


    <!--开套餐-->
    <div class="modal fade" id="createMembers">
        <div class="modal-dialog modal-dialog-scrollable">
            <div class="modal-content">
                <div class="modal-header">
                    <h5 class="modal-title" id="exampleModalScrollableTitle">开套餐</h5>
                    <button type="button" class="close" data-dismiss="modal">
                        <i class="anticon anticon-close"></i>
                    </button>
                </div>
                <div class="modal-body">
                    <div class="form-row align-items-center">
                        <div class="col-auto">
                            <input type="text" class="form-control" placeholder="会员电话号" id="phone">
                        </div>
                        <div class="col-auto">
                            <button id="findMemberPhone" class="btn btn-primary">查询</button>
                        </div>
                        <div id="memberinfo"></div>
                    </div>
                    <br>
                    <div class="m-b-10">
                        <select class="select2" name="state" id="packageSelect">
                            <option value="0" name="packageSelect" price = '0'>---请选择---</option>
                            {% for item in package %}
                                <option value="{{ item.name }}" price="{{ item.price }}" name="packageSelect">{{ item.name }}</option>
                            {% endfor %}
                        </select>
                    </div>
                    <br>
                    <div class="table-responsive">
                        <table class="table memberlist">
                            <tbody>

                            </tbody>
                        </table>
                    </div>
                </div>
                <div class="modal-footer">
                    <button type="button" class="btn btn-default" data-dismiss="modal">取消</button>
                    <button type="button" class="btn btn-primary" id="membersubmit">开套餐</button>
                </div>
            </div>
        </div>
    </div>

    <!--使用会员-->
    <div class="modal fade" id="useMembers">
        <div class="modal-dialog modal-dialog-scrollable">
            <div class="modal-content">
                <div class="modal-header">
                    <h5 class="modal-title" id="exampleModalScrollableTitle">选择会员</h5>
                    <button type="button" class="close" data-dismiss="modal">
                        <i class="anticon anticon-close"></i>
                    </button>
                </div>
                <div class="modal-body">
                    <div class="form-row align-items-center">
                        <div class="col-auto">
                            <input type="text" class="form-control" placeholder="会员电话号" id="phone2">
                        </div>
                        <div class="col-auto">
                            <button id="findMemberPhone2" class="btn btn-primary">查询</button>
                        </div>
                    </div>
                    <br>
                    <div class="table-responsive">
                        <table class="table memberlist">
                            <tbody>

                            </tbody>
                        </table>
                    </div>
                </div>
                <div class="modal-footer">
                    <button type="button" class="btn btn-default" data-dismiss="modal">返回</button>
                    <button type="button" class="btn btn-primary" id="usemembersubmit">确定</button>
                </div>
            </div>
        </div>
    </div>
    <!-- Core Vendors JS -->
    <script src="/static/assets/js/vendors.min.js"></script>

    <!-- page js -->

    <!-- Core JS -->
    <script src="/static/assets/js/app.min.js"></script>
    <script src="/static/assets/js/jquery.tabletojson.min.js"></script>
    <script src="/static/jqprint/jquery.jqprint-0.3.js"></script>
    <script src="/static/assets/vendors/select2/select2.min.js"></script>
    <script>
        $(document).ready(
            function() {
                $('.select2').select2();
                $("#sn").keydown(function(event) {
                if (event.keyCode == 13) {
                    $("#num").select();
                    $("#num")[0].focus();
                    }
                })
                $("#num").keydown(function(event) {
                    if (event.keyCode == 13) {
                        $("#price").select();
                        $("#price")[0].focus();
                    }
                })
                $("#print").click(function(){
                    $("#prints").jqprint();
                });
                $("#clear").click(function() {
                    $('#sn').val("");
                    $("#num").val("");
                    $("#price").val("");
                    $("#ta").text("");
                })
                $("#price").keydown(function(event) {
                    if (event.keyCode == 13) {
                        var sn = $("#sn").val();
                        var num = $("#num").val();
                        var price = $("#price").val();
                        var csrf = $('[name="csrfmiddlewaretoken"]').val();
                        $.ajax({
                            type: "POST",
                            data: {sku : sn,num : num,csrfmiddlewaretoken:csrf},
                            dataType: "json",
                            url:"/la/invoiceSKU/",
                            success:function (message) {
                                if(message.re){
                                    $("#list tbody").prepend('<tr><th>'+$("#list tr").length+'</th><td>'+sn+'</td><td>'+num+'</td><td>'+price+'</td><td>'+num*price+'</td></td>');
                                    var totle = $("#totle").text();
                                    totle = parseInt(totle) + num*price;
                                    $('#totle').text(totle)

                                }else{
                                    alert("输入的款号不存在，或超库存")
                                }
                            },
                            error:function (message) {
                                alert("提交失败"+message);
                            }
                        });
                        $("#sn").select();
                        $("#sn")[0].focus();
                        $('#sn').val("");
                        $("#num").val("");
                        $("#price").val("");
                    }
                });
                $("#find").click(function(){
                    console.log($('#thid').val());
                    var pid  = $('#thid').val();
                    var csrf = $('[name="csrfmiddlewaretoken"]').val();
                    $.ajax({
                    type: "POST",
                    data: {pid:pid,csrfmiddlewaretoken:csrf},
                    dataType: "json",
                    url:"/la/invoiceFIND/",
                    success:function (message) {
                        //alert(message[0]["sku"]);
                        $.each(message,function (i,item){
                            $("#thlist tbody").prepend('<tr><th scope="row"><input name="thli" type="checkbox" checked="" value="'+item.sku+'"></th><td>'+item.sku+'</td><td>'+item.price+'</td><td>'+item.num+'</td></tr>');
                        });
                    },
                    error:function (message) {
                        alert(message.re);
                    }
                    });
                });

                $("#packageSelect").change(function(){
                    price = $("#packageSelect option:selected").attr('price');
                    $("#memberinfo").empty();
                    $("#memberinfo").append('<p class="text-secondary">套餐价格:<span id = "price">'+price+'</sapn></p>');
                });

                $("#findMemberPhone").click(function(){
                    var phone  = $('#phone').val();
                    findPhone(phone)
                });
                $("#findMemberPhone2").click(function(){
                    var phone  = $('#phone2').val();
                    findPhone(phone)
                });
            });
        function findPhone(phone){
            var csrf = $('[name="csrfmiddlewaretoken"]').val();
            $.ajax({
            type: "POST",
            data: {phone:phone,csrfmiddlewaretoken:csrf},
            dataType: "json",
            url:"/la/invoiceFINDmemberPhone/",
            success:function (message) {
                //alert(message[0]["sku"]);
                $.each(message,function (i,item){
                    $(".memberlist tbody").prepend('<tr><th scope="row"><input name="memberList" type="checkbox" checked="" value="'+item.id+'"></th><td>'+item.name+'</td><td>'+item.phone+'</td></tr>');
                });
            },
            error:function (message) {
                alert(message.re);
            }
            });
        }
    </script>
    <script>
        $(function() {
            $("#submit").click(function(){
                var table = $('#list').tableToJSON(); // Convert the table into a javascript object
                console.log(table);
                var list = JSON.stringify(table);
                var syr = $('#syr').val();
                var zffs = $('#zffs').val();
                var pid  = $('#pid').text();
                var member = $('#member').val();
                var csrf = $('[name="csrfmiddlewaretoken"]').val();
                //alert(fields);
                $.ajax({
                type: "POST",
                data: {data : list,syr : syr,zffs : zffs,pid:pid,member:member,csrfmiddlewaretoken:csrf},
                dataType: "json",
                success:function (message) {
                    alert("结算成功");
                    location.reload();
                },
                error:function (message) {
                    alert("提交失败"+message);
                }
                });
            });
        });
    </script>
    <script>
        $(function() {
            $("#thsubmit").click(function(){
                var checkID = [];
                $("input[name='thli']:checked").each(function(i){
                    checkID[i] = $(this).val();
                })
                console.log(checkID)

                var pid  = $('#thid').val();
                //alert(fields);
                var csrf = $('[name="csrfmiddlewaretoken"]').val();
                $.ajax({
                type: "POST",
                data: {data : checkID,pid:pid,csrfmiddlewaretoken:csrf},
                url:"/la/invoiceth/",
                traditional:true,
                dataType: "json",
                success:function (message) {
                },
                error:function (message) {
                    alert("提交失败"+message);
                }
                });
            });
        });
    </script>

    <script>
        $(function() {
            $("#membersubmit").click(function(){
                packageName = $("#packageSelect option:selected").val();
                packagePrice = $("#packageSelect option:selected").attr('price');
                var member = [];
                $("input[name='memberList']:checked").each(function(i){
                    member[i] = $(this).val();
                })
                console.log(packagePrice)
                var csrf = $('[name="csrfmiddlewaretoken"]').val();
                $.ajax({
                    type: "POST",
                    data: {data : member,packageName : packageName,packagePrice:packagePrice,csrfmiddlewaretoken:csrf},
                    url:"/la/invoiceMemberSalePackage/",
                    traditional:true,
                    dataType: "json",
                    success:function (message) {
                        alert(message.re);
                    },
                    error:function (message) {
                        alert("提交失败"+message);
                    }
                });

            });
            $("#usemembersubmit").click(function(){
                var member = [];
                $("input[name='memberList']:checked").each(function(i){
                    member[i] = $(this).val();
                    $("#member").val($(this).val())
                })
                console.log(member)
            });
        });
    </script>
</body>

</html>